<template>
	<view class="selectDrug-wrap">
		<u-search class="search-input" :disabled="false"  @input="search" :keyword="goodsName" placeholder="搜索疾病/症状/药品名"></u-search>
		<scroll-view show-scrollbar="false" class="selectDrug-list" scroll-y @scrolltolower="scrollLoading()">
			<u-select-goods v-for="(item, index) in goodsList" type="1" @onClick="gotoRouter('/pages-mall/medicineDetail/medicineDetail?id=' + item.id)" @onChange="selectGoodsChange($event, index)" :key="index" :data="item"></u-select-goods>
			<uni-load-more v-if="dataTotalPage > 1" :status="dataLoading"></uni-load-more>
			<u-empty-state v-if="dataTotalPage == 0" value="暂无相关药品"></u-empty-state>
		</scroll-view>

		<u-bottom-button value="支付诊费" :num="countBuyNum" content="已选药品" unit="件" type="1" @click="gotoPayment"></u-bottom-button>
	</view> 
</template>

<script>
import uSearch from '@/components/u-search/u-search.vue';
import uSelectGoods from '@/components/u-select-goods/u-select-goods.vue';
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uSearch,
		uSelectGoods,
		uBottomButton,
		uniLoadMore,
		uEmptyState
	},
	data() {
		return {
			goodsName: '',
			pageNo: 1,
			pageSize: 20,
			dataTotalPage: 1, //数据总数
			dataLoading: 'loading', //数据加载
			goodsList: []
		};
	},
	computed: {
		...mapState({
			questionOrderForm: state => state.questionOrderForm
		}),
		countBuyNum() {
			let countNum = 0;
			this.goodsList.forEach(key => {
				countNum += key.buyNum;
			});
			return countNum;
		}
	},
	onLoad(option) {
		this.search();
	},
	onShow() {},
	methods: {
		...mapMutations({
			setQuestionOrderForm: 'setQuestionOrderForm',
			clearQuestionOrderForm: 'clearQuestionOrderForm'
		}),

		search(e) {
			this.pageNo = 1;
			this.goodsList = [];
			this.dataTotalPage = 1;
			if (e) {
				this.goodsName = e.value;
			}

			this.scrollLoading();
		},

		//商品列表
		queryCommodityList() {
			this.$api
				.queryCommodityList({
					params: {
						category: '4,5',
						name: this.goodsName,
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.goodsList = res.result.records;
						} else {
							this.goodsList = this.goodsList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//滚动加载
		scrollLoading() {
			if (this.pageNo <= this.dataTotalPage) {
				this.queryCommodityList();
			}
		},

		selectGoodsChange(e, index) {
			this.goodsList[index].buyNum = e;
		},

		gotoPayment() {
			const commodityList = [];

			if (this.countBuyNum == 0) {
				uni.showToast({
					title: '至少选择一个药品',
					icon: 'none'
				});
				return;
			}

			this.goodsList.forEach(key => {
				if (key.buyNum > 0) {
					commodityList.push(key);
				}
			});
			this.questionOrderForm.drugQuestionReq.commodityList = commodityList;
			this.gotoRouter('/pages-inquiry/inquiryPayment/inquiryPayment');
		}
	}
};
</script>

<style lang="less">
@import './selectDrug.less';
</style>
